<template>
    <div class="todo-list">
      <h2>自律一下</h2> <!-- 修改标题 -->
      <input v-model="newTodoTitle" placeholder="Add a new todo" />
      <button @click="addTodo">添加</button> <!-- 修改按钮文本 -->
      <ul>
        <TodoItem
          v-for="(todo, index) in todos"
          :key="index"
          :title="todo.title"
          :completed="todo.completed"
          @update:completed="updateTodoCompleted(index, $event)"
          @remove-todo="removeTodo(index)"
        />
      </ul>
    </div>
  </template>
  
  <script>
  import TodoItem from './TodoItem.vue';
  
  export default {
    name: 'TodoList',
    components: {
      TodoItem
    },
    data() {
      return {
        todos: [],
        newTodoTitle: ''
      };
    },
    methods: {
      addTodo() {
        if (this.newTodoTitle.trim()) {
          this.todos.push({ title: this.newTodoTitle, completed: false });
          this.newTodoTitle = '';
        }
      },
      removeTodo(index) {
        this.todos.splice(index, 1);
      },
      updateTodoCompleted(index, completed) {
        this.todos[index].completed = completed;
      }
    }
  }
  </script>
  
  <style scoped>
  ul {
    list-style-type: none;
    padding: 0;
  }
  
  .todo-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  
  .todo-item span {
    margin-left: 10px;
  }
  
  .todo-item button {
    margin-left: 20px;
  }
  </style>